<template>
	<view class="page">
		<view class="navBarBx">
			<u-navbar title="我的订单" :background="navbackground" :border-bottom="false" title-color="#ffffff"
				back-icon-color="#ffffff"></u-navbar>
			<view class="fbc incometoast">
				<view class="fac incomeBx">
					<view class="fccm">
						<text class="incomeTxt">预计收入/元</text>
						<text class="incomeNum">1676.15</text>
					</view>
					<view class="fccm">
						<text class="incomeTxt">有效订单/单</text>
						<text class="incomeNum">30</text>
					</view>
				</view>
				<!-- 点击事件放这个arrowRight view上  增加用户可点击面积 -->
				<view class="arrowRight" >
					<u-icon name="arrow-right" color="#fff" size="20"></u-icon>
				</view>
			</view>
		</view>
		<view>
			<view class="fbc adminbx">
				<text class="orderadmintxt">订单管理</text>
				<view class="fc">
					<text class="stateCircle"></text>
					<text class="orderstate">接单中</text>
				</view>
			</view>
			<view class="tabListBx">
				<u-tabs bg-color='#f7f4f8':list="tabList" :is-scroll="false" active-color='#2192e6' font-size='26' :current="tabCurrent" @change="tabChange"></u-tabs>
			</view>
		</view>
		<view class="orderBx">
			<view class="orderItem" v-for="item in 2" :key="item" @click="toInfo">
				<view class="fbc oderCodeBx">
					<text class="orderCode">订单编号：1600329168797617</text>
					<text class="satus">交易成功</text>
				</view>
				<view class="fbc">
					<view class="imgbxs fc">
						<scroll-view class="gradMenuBxScroll" scroll-x>
							<image src="/static/img/test3.jpg" class="imhitem" v-for="item in 5" :key="item" mode="heightFix"></image>
						</scroll-view>
					</view>
					<view class="numbx">
						<text class="awattxs">等共100件</text>
						<u-icon name="arrow-right" color="#333333" size="16"></u-icon>
					</view>
				</view>
				<view class="fbc timebx">
					<view class="wantime">完成时间：2020-09-30 09：53：42</view>
					<view class="fc">
						<text class="gongi">共计2件商品</text>
						<text class="shifumoney">实付款：7.00</text>
					</view>
				</view>
				<view class="btnbx">
					<view class="btncom redColor">订单详情</view>
					<view class="btncom redColorBg">正在配送</view>
					<view class="btncom blueColor">订单详情</view>
					<view class="btncom blueColorBg">订单完成</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navbackground: {
					background: 'transparent'
				},
				tabList: [{
						name: '全部订单',
						state:0
					},
					{
						name: '新订单',
						state:1
					},
					{
						name: '配送中',
						state:2
					},
					{
						name: '售后订单',
						state:3
					},
					{
						name: '历史订单',
						state:4
					}
				],
				tabCurrent: 0
			};
		},
		onPageScroll(e) {
			let tp = e.scrollTop;
			if (tp >= 50) {
				this.navbackground.background = '#1891fe';
			} else {
				this.navbackground.background = 'transparent';
			}
			if (tp >= 300) {
				this.navbackground.background = '#1891fe';
			}
		},
		onLoad() {},
		onShow() {},
		methods: {
			tabChange(index) {
				this.tabCurrent = index;
			},
			toInfo(){
				uni.navigateTo({
					url:'/pages/user/orderInfo/orderInfo'
				})
			}
		}
	};
</script>

<style scoped>
	@import url('order.css');
</style>
